<template>
  <div class="Suspended-ball"
   @touchstart.stop.prevent="xuanfuStart"
      @touchmove.stop.prevent="xuanfuMove"
      @touchend.stop.prevent="xuanfuEnd"
      :style="{ top: movingY + 'px' }"
  >
    <div class="ball-left" v-show="showBall"
    >
      <div @touchstart="jump1">
        <van-icon name="wap-home-o" color="white" size="25px" />
      </div>
      <div style="margin: auto 0" @touchstart="jump2">
        <van-icon name="shopping-cart" color="white" size="25px" />
      </div>
      <div style="magin-left: auto" @touchstart="jump3">
        <van-icon name="user-o" color="white" size="25px" />
      </div>
    </div>
    <div class="ball-right" @touchstart="changeBall">
      <img
        class="auto-img"
        src="http://47.115.51.185/h5/img/close.446e8669.gif"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBall: false,

    movingY: 540,
      clickBallHeight: 0,
      moveBol: false,
    };
  }, methods:{
    jump1(){
        this.$router.push("/")
    },
      jump2(){
        this.$router.push("/cart")
    },
      jump3(){
        this.$router.push("/my")
    },
    changeBall(){
      if(this.showBall==false){
        this.showBall=true
      }else{
        this.showBall=false
      }
    },

    xuanfuStart(e) {
      this.clickBallHeight = e.targetTouches[0].clientY - this.movingY;
    },
    xuanfuMove(e) {
      this.moveBol = true;
      this.movingY = e.targetTouches[0].clientY - this.clickBallHeight;
      if (this.movingY < 100) {
        this.movingY = 100;
      } else if (this.movingY > 540) {
        this.movingY = 540;
      }
    },
    xuanfuEnd() {
 
      this.moveBol = false;
    },


  }
};
</script>

<style lang="less" scoped>
.Suspended-ball{
  position: fixed;
  right: 0px;
//   bottom: 100px;
  display: flex;
  z-index: 999;
}
.ball-left{
  background-color: #fc4141;
  display: flex;
width: 125px;
align-items: center;
    justify-content:space-evenly;
    
    border-radius: 25px;
/* background: #f44939!important */
margin-right: 10px;
}
.ball-right{
  background-color: rgb(244,73,57);
//   padding: 10px;
  border-radius: 50%;
width: 43px;
    
}
.auto-img{
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(
90deg
);
}
</style>